<!-- 车辆管理 -->
<template>
  <div
    class="dashboard-container driver customer-list-box"
    style="padding: 20px"
  >
    <el-card class="box-card alert">
      <el-row>
        <el-form label-width="120px">
          <el-col :span="8">
            <el-form-item label="司机账号:">
              <el-input
                v-model="zhanglist.account"
                placeholder="请输入司机账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名:">
              <el-input
                v-model="zhanglist.name"
                placeholder="请输入司机姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机手机号:">
              <el-input
                v-model="zhanglist.phone"
                placeholder="请输入司机手机号"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属机构:">
              <treeselect
                v-model="zhanglist.agentId"
                :options="agencyOptions"
                :normalizer="normalizer"
                :searchable="true"
                style="width:100%"
                placeholder="请选择所属机构"
                no-options-text="暂无数据"
                no-results-text="暂无数据"
                @select="selectAgency"
                @open="open"
                @close="close"
              />
              <img
                ref="arrow"
                src="../../assets/pullDown.png"
                style="position:absolute;width:18px;height:18px;right:9px;top:12px;cursor:pointer;pointer-events:none;transition-duration:0.3s"
              />
            </el-form-item>
          </el-col>

          <el-col
            :span="8"
            :push="1"
          >
            <el-button
              style="width: 80px"
              class="zhang-anniu"
              @click="zhangsousuo"
            >搜索</el-button>
            <el-button @click="zhangchongzhi">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card class="box-card alert">
      <el-table :data="items">
        <el-table-column
          type="index"
          width="100px"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="司机账号"
        > </el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
        > </el-table-column>
        <el-table-column
          prop="mobile"
          label="司机电话"
        > </el-table-column>
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
        >
        </el-table-column>
        <el-table-column
          prop="agency"
          label="所属机构"
        >
          <template v-slot="{ row }">
            <div>{{ row.agency.name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="workStatus"
          label="工作状态"
        >
          <template v-slot="{ row }">
            <div>{{ row.workStatus === 1 ? '上班' : '休班' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180px"
          fixed="right"
        >
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="text"
              @click="zhangchakan(row)"
            >查看</el-button>
            <span class="zhanggun"></span>
            <el-button
              size="mini"
              type="text"
              @click="peizhicheliang(row)"
            >配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        type="flex"
        justify="center"
        style="margin: 30px 0px"
      >
        <el-col :span="8">
          <el-pagination
            :current-page="zhanglist.page"
            :page-size="zhanglist.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+counts"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 车辆弹窗 -->
    <el-dialog
      title="配置车辆"
      style="padding: 0 350px"
      :visible="zhangdialogVisible"
      width="640px"
      @close="close"
    >
      <div style="background-color: #fbfafa; padding: 20px 50px">
        <el-row>
          <el-col
            :span="12"
          ><span>司机编号:</span><span>{{ zhangcheliang.userId }}</span></el-col>
          <el-col
            :span="12"
            style="margin-bottom:15px"
          ><span>司机名称:</span><span>{{ zhangcheliang.name }}</span></el-col>
        </el-row>
        <el-row>
          <el-col
            :span="12"
          ><span>司机电话:</span><span>{{ zhangcheliang.mobile }}</span></el-col>
          <el-col
            :span="12"
          >
            <span>所属机构:</span>
            <span>{{
              JSON.parse(JSON.stringify(zhangcheliang.agency)).name
            }}</span>

          </el-col>
        </el-row>
      </div>
      <div>
        配置车辆:
        <el-select
          v-model="licensePlate"
          style="width: 200px; margin: 20px"
          placeholder="请选择"
          @change="aoligei"
        >
          <el-option
            v-for="item in zhangchepai"
            :key="item.id"
            :label="item.licensePlate"
            :value="item.licensePlate"
          >
          </el-option>
        </el-select>
      </div>
      <el-table
        :data="tanchuangxuanran"
        style="width: 100%"
      >
        <el-table-column
          prop="licensePlate"
          label="车牌号"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="车辆状态"
        >
          <template v-slot="{ row }">
            <span>{{ row.workStatus === 1 ? '上班' : '休息' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="操作"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="zhangchakantiaozhuan(row)"
            >查看</el-button>
            <el-button
              type="text"
              style="color: red"
              @click="zhangcheliangshanchu(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 20px">
        <el-button
          style="background-color: #e15536; color: #fff; width: 90px"
          @click="zhangtanchuangqd()"
        >确定</el-button>
        <el-button
          style="width: 90px"
          @click="zhangdialogVisible = false"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {
  driverList,
  getTruckListInDriver,
  truckDel,
  driverArrangeCar
} from '@/api/transit'
import { agencyList } from '@/api/institutions'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Courses',
  components: {
    Treeselect
  },
  data() {
    return {
      agencyOptions: [], // 所属机构树
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      zhangdialogVisible: false,
      counts: null, // 页码总数
      zhanglist: {
        name: '', // 名字
        account: '', // 账号
        agentId: null, // 机构id
        phone: '', // 手机号
        workStatus: null, // 工作状态
        page: 1, // 当前页码
        pageSize: 10 // 页码尺寸
      },
      zhangcheliang: {
        account: '',
        agency: {
          id: null,
          name: ''
        }
      },
      // 配置车辆
      items: [], //
      zhangchepai: [], // 车牌接口
      licensePlate: '', // 选择车牌
      xuanzeid: '', // 选择id
      chepaixiangqing: [], // 车牌详情
      agencyList: [], // 转运中心
      tanchuangxuanran: [] // 弹窗渲染数据
    }
  },
  created() {
    this.zhangsijixuanran()
    this.agencyList111()
    this.getAgencyList()
  },

  methods: {
    // 所属机构渲染
    async agencyList111() {
      const { data } = await agencyList()
      const a = JSON.parse(data)
      this.agencyList = a.map((item) => {
        return item.name
      })
    },
    // 监听弹窗关闭
    close() {
      this.zhangdialogVisible = false
      this.tanchuangxuanran = []
    },
    // 弹窗里选择框change事件
    async aoligei() {
      this.tanchuangxuanran = this.chepaixiangqing.filter((item) => {
        return item.licensePlate === this.licensePlate
      })
    },
    // 分页器
    handleCurrentChange(aa) {
      this.zhanglist.page = aa
      this.zhangsijixuanran()
    },
    // 清除表单
    zhangchongzhi() {
      this.zhanglist = {
        name: '', // 名字
        account: '', // 账号
        agentId: null, // 机构id
        phone: '', // 手机号
        workStatus: null, // 工作状态
        page: 1, // 当前页码
        pageSize: 10 // 页码尺寸
      }
      this.zhangsijixuanran()
    },
    // 搜索
    zhangsousuo() {
      this.zhangsijixuanran()
    },
    // 页面渲染
    async zhangsijixuanran() {
      const { data } = await driverList(this.zhanglist)
      console.log(data)
      this.counts = data.counts
      this.items = data.items
    },
    // 查看页面
    zhangchakan(row) {
      const id = row.userId
      this.$router.push(`driver-detail/?id=${id}&formUrlName=司机管理`)
    },
    // 配置车辆
    async peizhicheliang(row) {
      this.zhangcheliang = row

      this.tanchuangxuanran.push(row.truck)

      this.licensePlate = row.truck.licensePlate
      this.xuanzeid = row.truck.id

      const { data } = await getTruckListInDriver()

      this.zhangchepai = data
      const id = this.xuanzeid
      const a = await getTruckListInDriver(id)
      this.chepaixiangqing = a.data

      this.$confirm(`<p style="margin-bottom:5px">配置车辆需满足以下条件：</p>
      <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center;  line-height: 14px;">1</span>
      <span style="margin-right:50px">司机信息已完善</span>
      <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center;  line-height: 14px;margin-left:35px">2</span>
      <span>司机已设置排班</span><br/>
      <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center;  line-height: 14px;margin-top:10px">3</span>
      <span>司机绑定车辆未在启用状态</span>`,
      '车辆配置',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
      )
        .then(async () => {
          this.zhangdialogVisible = true
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 删除车辆 并清空选择框框
    async zhangcheliangshanchu(row) {
      const a = await truckDel(row.id)
      if (a.msg === 'ok') {
        this.licensePlate = ''
        this.tanchuangxuanran = []
        return
      }
      this.$message.error(a.msg)
    },
    // 点击查看跳转
    zhangchakantiaozhuan(row) {
      this.$router.push(`vehicle-detail/?id=${row.id}&formUrlName=车辆管理`)
    },
    // 弹窗确定按钮
    async zhangtanchuangqd() {
      const b = {
        driverIds: [+this.zhangcheliang.userId],
        truckId: +this.zhangcheliang.truck.truckTypeId
      }
      const a = await driverArrangeCar(b)
      if (a.msg) {
        this.$message.error(a.msg)
        this.close()
      }
      this.close()
    },
    // 获取树状机构信息
    async getAgencyList() {
      try {
        const { data: res } = await agencyList()
        // 获取数据给options
        this.agencyOptions = JSON.parse(res)
      } catch (error) {
        console.log(error)
      }
    },
    // 赋予搜索id为搜索框内的数据
    selectAgency(val) {
      this.agencyOptions.agentId = val.id
    },
    // 打开所属机构下拉框
    open() {
      this.$refs.arrow.style.transform = 'rotate(-180deg)'
    },
    // 关闭所属机构下拉框
    closeSelect() {
      this.$refs.arrow.style.transform = 'rotate(0deg)'
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
/deep/ .el-select {
  width: 100%;
}

/deep/ .el-card {
  overflow: initial;
}
.zhang-anniu {
  background-color: #e15536;
  color: #fff;
}
.zhanggun {
  width: 5px;
  height: 15px;
  background-color: #000;
}
</style>
